@import './variables.scss';

:root {
  // 动态计算基准值
  --scale-ratio: 1;
  --font-size-base: calc(16px * var(--scale-ratio));
}

html {
  font-size: 16px; // 默认基准
  font-family: $font-family;
  overflow: hidden;
}

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

// 响应式媒体查询生成器
@mixin respond-to($breakpoint) {
  $size: map-get($breakpoints, $breakpoint);
  @media (max-width: $size) {
    $ratio: map-get($space-ratios, $breakpoint);
    --scale-ratio: #{$ratio};
    @content;
  }
}

@media (max-aspect-ratio: 16/9) {
  .map-container {
    min-width: 70vw;
  }
  .left-panel, .right-panel {
    width: 14vw;
  }
}

// 应用断点
@include respond-to('xxl') { /* 超宽屏样式 */ }
@include respond-to('xl') { /* 标准大屏 */ }
@include respond-to('lg') { /* 笔记本屏幕 */ }
@include respond-to('md') { /* 小屏适配 */ }
@include respond-to('sm') { /* 最小尺寸保护 */ }